<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Account Manager</title>

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="css/footer.css" />
<script type='text/javascript' src='js/jquery-2.1.1.js'></script>

<!-- configure confirm -->
<script type='text/javascript' src="apps/confirm/jquery.hs_confirm.js"></script>
<link rel='stylesheet' type='text/css'
	href='apps/confirm/hs_confirm.css' />

<!--configure calendar-->
<!-- <link rel="stylesheet" type="text/css" href="apps/calendar/calendar.css" />
<script language="JavaScript" src="apps/calendar/calendar_vi.js"></script> -->

<!--configure bootstrap-->
<!-- <link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js" type='text/javascript'></script> -->

<script type='text/javascript'>
	$(document)
			.ready(
					function(e) {
						/*event click button select or deselect*/
						$('#btnSelect').on('click', function(e) {
							$('input:checkbox').prop('checked', true);
						});
						$('#btnDeselect').click(function(e) {
							$(':checkbox').prop('checked', false);
						});

						var attr = [ 'id', 'username', 'displayName', 'type',
								'status', 'join' ];
						var listEdit = [];

						/*create json account*/
						function createAccount(row) {
							var obj = new Object();
							$.each(attr, function(i) {
								if (i == 0) {
									obj[attr[i]] = $(row).children().eq(i + 1)
											.children().text();
								} else {
									obj[attr[i]] = $(row).children().eq(i + 1)
											.children().val();
								}
							});
							return obj;
						}

						/*add account to list edit*/
						function addToListEdit(obj) {
							if (typeof obj === "undefined") { // get
								return listEdit;
							} else { // add
								var val = false;
								$.each(listEdit, function(i) {
									console.log(listEdit[i].id
											+ (listEdit[i].id == obj.id));
									if (listEdit[i].id == obj.id) {
										val = true;
										listEdit[i] = obj;
										return false;
									}
								});
								if (val)
									return;
								listEdit.push(obj);
							}
						}
						;

						/*save change account*/
						$('#btnSave').click(function() {
							$.ajax({
								url : '?do=mgr&cmd=sav',
								type : 'post',
								dataType : 'text',
								data : {
									json : JSON.stringify(listEdit)
								},
								success : function(data) {
									listEdit = [];
								}
							});
						});

						/*event change context*/
						$('input:text, select').change(
								function() {
									addToListEdit(createAccount($(this)
											.parent().parent()));
									console.log(listEdit);
								});

						/*event click button delete*/
						$('#btnDelete')
								.click(
										function(e) {
											var rows = $('.tbl_div .tbl_list :checkbox:checked');
											if (rows.length > 0) {
												$
														.openDialog({
															text : 'Bạn có muốn xóa các dòng đã chọn?<br><i>(Lưu ý: Thao tác sẽ không thể phục hồi dữ liệu)</i>',
															title : "Xác thực",
															confirm : function() {
																// delete rows selected
																deleteSelected(rows
																		.parent()
																		.parent());
																var list = [];
																test = rows
																		.parent()
																		.parent();
																test
																		.each(function() {
																			list
																					.push($(
																							this)
																							.children()
																							.eq(
																									1)
																							.text());
																		});
																console
																		.log(list);
																$
																		.ajax({
																			url : '?do=mgr&cmd=del',
																			type : 'post',
																			dataType : 'text',
																			data : {
																				json : list
																			},
																			success : function(
																					data) {
																				$
																						.openDialog({
																							text : data,
																							warning : true,
																							confirmText : 'Đồng ý',
																							color : '#4A4AFF',
																							border : '3px solid #4A4AFF'
																						});
																			}
																		});
															},
															color : '#4A4AFF',
															border : '3px solid #4A4AFF'
														});
											} else {
												$
														.openDialog({
															text : 'Chọn ít nhất một dòng cần xóa',
															confirmText : 'Đồng ý',
															warning : true,
															color : '#4A4AFF',
															border : '3px solid #4A4AFF'
														});
											}
										});

						/*format table with 2 color*/
						$('tr:odd').css('background', '#F9F9FF');
						$('tr:even').css('background', '#EAEAFF');

						/*table highlight when hover tr of table*/
						$('table tr:not(table tr:first)').hover(function(e) {
							$(this).children().css('background', '#B9B9FF');
						}, function(e) {
							$(this).children().css('background', 'none');
						});

						/*function delete rows selected*/
						function deleteSelected(rows) {
							rows.each(function(index, element) {
								$(this).fadeOut(180, function() {
									//$(this).remove();
								});
							});
						}

						/*function select text when textbox focused*/
						$(':text, select').focus(
								function(e) {
									$('table tr:not(table tr:first)')
											.children().css('background',
													'none');
									$(this).select();
									$(this).css('box-shadow',
											'0 0 9px 2px lightblue');
									$(this).css('background-color', '#F7F7F7');
								});

						/*change background of text, select when blur*/
						$(':text, select').blur(function(e) {
							$(this).css('box-shadow', 'none');
							$(this).css('background-color', 'transparent');
						});

						/*format width header*/
						$('.tbl_div .tbl_list tr:first td:eq(1)').css(
								'min-width', '54px');
						$('.tbl_div .tbl_list tr:first td:eq(4)').css(
								'min-width', '90px');
						$('.tbl_div .tbl_list tr:first td:eq(5)').css(
								'min-width', '120px');
						$('.tbl_div .tbl_list tr:first td').each(
								function(index, element) {
									$(
											'.tbl_header_div .tbl_header tr th:eq('
													+ index + ')').width(
											$(this).width());
								});
						$('.tbl_header_div').width($('.tbl_div').width());
						$('.tbl_header').width($('.tbl_div .tbl_list').width());

						$(window).on('beforeunload', function() {
							if (listEdit.length > 0)
								return 'Bạn vẫn chưa lưu các chỉnh sửa';
						});
					});
</script>
<style type='text/css'>
.tbl_list {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}

.tbl_list tr:hover {
	color: red;
}

.tbl_list td,.tbl_header th {
	border: 1px solid #9393FF;
	text-align: center;
}

.tbl_header th {
	background: #8AA8FF;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	border-bottom: none;
	padding: 3px 0;
}

input[type=text],select {
	background-color: transparent;
	border: none;
	outline: none;
	width: 99%;
	border-radius: 2px;
}

.tbl_div {
	margin: 0;
	margin-top: -1px;
	padding: 0;
	min-height: 90px;
	max-height: 500px;
	overflow: scroll;
	max-height: 500px;
}

#select_div {
	margin-bottom: 5px;
}
</style>
</head>

<body>
	<%@ include file="Header.jsp"%>
	<div id='wrapper'>
		<div id='select_div'>
			<button class='button' id='btnSelect'>Chọn tất cả</button>
			<button class='button' id='btnDeselect'>Bỏ chọn</button>
		</div>

		<div class='tbl_header_div'>
			<table class='tbl_header tbl_list'>
				<thead>
					<tr>
						<th>#</th>
						<th>ID</th>
						<th>Tên tài khoản</th>
						<th>Tên hiển thị</th>
						<th>Quyền hạn</th>
						<th>Trạng thái</th>
						<th>Ngày tham gia</th>
					</tr>
				</thead>
			</table>
		</div>
		<div class='tbl_div'>
			<table class='tbl_list'>

				<c:forEach var="acc" items="${accountList}">
					<tr>
						<td><input type='checkbox' /></td>
						<td><a href='account?do=view&uid=${acc.id}'>${acc.id}</a></td>
						<td><input type='text' name='username'
							value='${acc.username}' /></td>
						<td><input type='text' name='displayname'
							value='${acc.displayName}' /></td>
						<td><select name='type'>
								<option value='User'
									${acc.type=='User'?"selected='selected'":''}>User</option>
								<option value='Mod' ${acc.type=='Mod'?"selected='selected'":''}>Mod</option>
								<option value='SMod'
									${acc.type=='SMod'?"selected='selected'":''}>SMod</option>
								<option value='Admin'
									${acc.type=='Admin'?"selected='selected'":''}>Admin</option>
						</select></td>
						<td><select name='state'>
								<option value='-1' ${acc.state==-1?"selected='selected'":''}>Not
									active</option>
								<option value='0' ${acc.state==0?"selected='selected'":''}>Normal</option>
								<option value='1' ${acc.state==1?"selected='selected'":''}>Banned</option>
						</select></td>
						<td><input type='text' id='join' name='join'
							value='${acc.joinString}' /> <!-- <script language="JavaScript">
									new tcal({
										'formname' : 'formMgr',
										'controlname' : 'join'
									});
								</script> --></td>
					</tr>
				</c:forEach>

			</table>
		</div>
		<div id='function_div'>
			<button class='button' id='btnDelete'>Xóa</button>
			<button class='button' id='btnSave'>Lưu</button>
		</div>
	</div>

	<jsp:include page="Footer.jsp"></jsp:include>
</body>
</html>